<template>
    <div flex="~ flex-wrap justify-between" mx--10px>
        <card-row v-for="row in list" :key="row.id" :row="row" />
    </div>
</template>

<script lang="ts" setup>
import type { IndexCardType } from "~/types/table.types";

import cardRow from "~/views/dashboard/components/card-row.vue";

defineOptions({
    name: "CardIndex"
});

const list = ref<IndexCardType[]>([
    {
        id: 1,
        name: "访问人数",
        data: "100000",
        color: "#4e73df",
        icon: "iconfont icon-fensiguanli"
    },
    {
        id: 2,
        name: "最新信息",
        data: "30",
        color: "#1cc88a",
        icon: "iconfont icon-xiaoxi"
    },
    {
        id: 3,
        name: "库存数量",
        data: "20000",
        color: "#36b9cc",
        icon: "iconfont icon-shuliang"
    },
    {
        id: 4,
        name: "当月营收",
        data: "20,000",
        color: "#f6c23e",
        icon: "iconfont icon-shuliang"
    }
]);
</script>
